<template>
  <div style="margin-right: 12px">
    <a-space size="large">
      <a-tooltip title="更换主题色" :color="color">
        <a style="padding: 0 12px; display: inline-block; user-select: none" @click="themeColorClick">
          <BgColorsOutlined />
        </a>
      </a-tooltip>
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          <a-avatar
            size="large"
            class="ant-dropdown-link"
            :style="{ backgroundColor: color, verticalAlign: 'middle' }"
            @click.prevent
          >
            {{ currentUser.userName }}
          </a-avatar>
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="logout">
              <template #icon>
                <LogoutOutlined />
              </template>
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { BgColorsOutlined, LogoutOutlined } from '@ant-design/icons-vue';
import { apply, load, randomTheme } from '@/hooks/useTheme';
import { ref } from 'vue';
import { LoginUser, USER_LOGOUT } from '@/store/login/loginUser';
import { useStoreGlobalStore } from '@/store';

defineProps<{
  currentUser: LoginUser;
}>();

let color = ref(load());
const themeColorClick = () => {
  color.value = randomTheme();
  apply(color.value);
};

const globalStore = useStoreGlobalStore();
const router = useRouter();
const logout = () => {
  globalStore.commit(USER_LOGOUT);
  router.push({ name: 'login' });
};
</script>
